---
import { GITHUB_TOKEN } from 'astro:env/server'
import ReactNav from './Nav'
import pkg from '/../packages/number-flow/package.json'

const repoPath = 'barvian/number-flow'
const repo = await fetch(`https://api.github.com/repos/${repoPath}`, {
	headers: {
		Authorization: `Bearer ${GITHUB_TOKEN}`,
		'X-GitHub-Api-Version': '2022-11-28'
	}
}).then((r) =>
	r.ok ? r.json() : Promise.reject(`Could not fetch repo ${repoPath}: ${r.statusText}`)
)
const stargazers: number = repo.stargazers_count
const formattedStars = stargazers.toLocaleString('en-US', {
	notation: 'compact',
	compactDisplay: 'short'
	// GitHub rounds these (Twitter truncates)
	// roundingMode: 'trunc'
})
---

<ReactNav
	client:load
	stargazers={formattedStars}
	repo={pkg.repository.url}
	transition:persist="nav"
/>

<style is:global>
	::view-transition-old(nav) {
		/* This is a persistent element, so let the new always show on top. See https://developer.chrome.com/docs/web-platform/view-transitions#making_the_most_of_content_you_already_have */
		animation: none;
		opacity: 0;
	}

	::view-transition-new(nav) {
		animation: none;
	}
</style>
